<template>
    <div class="wrapper">

            <!--<div class="pMain">-->
                <!--<div class="myYear">-->
                    <!--<img src="http://rs.static.quanc.com.cn/activies/mfAct/myYear.png" alt="">-->
                <!--</div>-->
                <!--<div class="prize">-->
                    <!--<span>购房优惠券</span>-->
                    <!--<em>{{this.isPrizeGoods}}</em>-->
                <!--</div>-->
                <!--<div class="prize">-->
                    <!--<span>话费红包</span>-->
                    <!--<em>{{this.isPrizeFare}}</em>-->
                <!--</div>-->
                <!--<div class="prize">-->
                    <!--<span>年货礼包</span>-->
                    <!--<em>{{this.isPrizeTicket}}</em>-->
                <!--</div>-->
                <!--<h2>温馨提示</h2>-->
                <!--<p>请您于即日起至2019年2月4日（除夕），至勾选项目售楼中心领取礼品。每个礼品兑换券对应兑换一份礼品。活动过程中如遇不可抗拒因素出现提前终止、延时情况，恕不另行通知。奖品及一切以实物为准，本次活动解释权归明发集团所有。</p>-->
            <!--</div>-->

        <!--<div class="bot">-->
            <!--<img src="http://rs.static.quanc.com.cn/activies/mfAct/4.jpg" alt="">-->
        <!--</div>-->
        <div class="swiper">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide>
                    <div class="swiper1">
                        <div class="pMain">
                            <div class="myYear">
                                <img src="http://rs.static.quanc.com.cn/activies/mfAct/myYear.png" alt="">
                            </div>
                            <div class="prize">
                                <span>购房优惠券</span>
                                <em>{{this.isPrizeTicket}}<i v-if="isVerification4"></i></em>
                            </div>
                            <div class="prize">
                                <span>话费红包</span>
                                <em>{{this.isPrizeFare}}</em>
                            </div>
                            <div class="prize">
                                <span>年货礼包</span>
                                <em>{{this.isPrizeGoods}}<i v-if="isVerification3"></i></em>
                            </div>
                            <h2>温馨提示</h2>
                            <p>本次活动为明发集团周年庆典氛围宣传，并不构成投资建议，活动最终解释权归开发商所有。<br> 礼品数量有限，领完即止</p>
                        </div>
                        <div class="return" @click="ret">
                            <img src="http://rs.static.quanc.com.cn/activies/mfAct/left.png" alt="">
                        </div>
                        <div class="text">本次庆典参与项目如下</div>
                        <div class="arrow">
                            <img src="http://rs.static.quanc.com.cn/activies/mfAct/arrow.png" alt="">
                        </div>
                    </div>

                </swiper-slide>
                <swiper-slide>
                    <div class="bot">
                        <div class="arrow">
                            <img src="http://rs.static.quanc.com.cn/activies/mfAct/arrow.png" alt="">
                        </div>
                        <div class="return" @click="ret">
                            <img src="http://rs.static.quanc.com.cn/activies/mfAct/left.png" alt="">
                        </div>
                        <div class="text">礼品领取详细地址如下</div>
                        <!--<img src="http://rs.static.quanc.com.cn/activies/mfAct/4.jpg" alt="">-->
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="bots">
                        <div class="return" @click="ret">
                            <img src="http://rs.static.quanc.com.cn/activies/mfAct/left.png" alt="">
                        </div>

                        <!--<img src="http://rs.static.quanc.com.cn/activies/mfAct/4.jpg" alt="">-->
                    </div>
                </swiper-slide>
                <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
            </swiper>
            <!--<div class="swiper-button-next"></div> -->
            <!--<div class="swiper-button-prev"></div> -->
        </div>


    </div>

</template>
<script>
 import request from "@/utils/request";
 import Cookies from "js-cookie";
 import * as config from "./config";
// import wxsdk from "@/utils/wxsdk";
 import wx from "weixin-js-sdk";
 import "swiper/dist/css/swiper.css";
 import { mapState, mapMutations} from "vuex";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
        isVerification3: false,
        isVerification4: false,
        isPrizeFare:'无',
        isPrizeGoods: '无',
        isPrizeTicket: '未領取',
        reOpenid: '',
        openid: Cookies.get("openid"),
        swiperOption: {
            direction: 'vertical',
            slidesPerView: 1,
            mousewheel: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            height: window.innerHeight   // 高度设置，占满设备高度
        },

    };
  },
    components: {
        swiper,
        swiperSlide
    },
    computed: {
        ...mapState(["info","channel"])
    },
  methods: {
      ret(){
          this.$router.push({path: '/index', query:{channel:this.channel,reOpenid:this.reOpenid}});
      },
      isAward(list){
          console.log(list)
          let _self = this;
          list.forEach(function (v, i) {
              if(v.prizecode=='prize_2'){
                  _self.isPrizeFare ='已領取'
              }else if(v.prizecode=='prize_3'&&v.isreceievd== 0){ //年货大礼包
                  _self.isPrizeGoods =v.id
              }else if(v.prizecode=='prize_3'&&v.isreceievd== 1){
                  _self.isPrizeGoods =v.id
                  _self.isVerification3 = true
              }else if(v.prizecode=='prize_4'&&v.isreceievd== 0){ //购房优惠券
                  _self.isPrizeTicket =v.id
              }else if(v.prizecode=='prize_4'&&v.isreceievd== 1){
                  _self.isPrizeTicket =v.id
                  _self.isVerification4 = true
              }
          })
      },
      ...mapMutations({
          setInfo: "SET_INFO",
          setChannel: "SET_CHANNEL"
      })
  },
  mounted() {

      this.reOpenid=this.$route.query.reOpenid ? this.$route.query.reOpenid : '';
      request
          .get(this.global.API_URL, {
              action: "/activity/relay/RelayAction/getUserPrize",
              requestParam: {
                  actcode: config.ACT_CODE
              }
          })
          .then(response => {
             this.isAward(response.obj)
          });
      let _self = this;
      _self.global.SHARE_CALLBACK_OK = function (type) {
          request
              .post(this.global.API_URL, {
                  action: "/activity/relay/RelayAction/share",
                  requestParam: {
                      actcode: config.ACT_CODE,
                      prizecode: 'prize_1',
                      channel:_self.channel
                  }
              })
              .then(response => {

              });

      };
      _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/mfact/index?channel='+_self.channel+'&reOpenid='+_self.openid;
      config.initShare();


  },
    created(){
        this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
        if(!this.info.mobile){
            request
                .get(this.global.API_URL, {
                    action: "/activity/relay/RelayAction/getActUserInfo",
                    requestParam: {
                        actcode: config.ACT_CODE,
                        referenceopenid: ""
                    }
                })
                .then(response => {
                    this.setInfo(response.obj);
                    if(this.info&&this.info.nickname&&this.info.nickname!=''){
                        this.global.SHARE_TITLE = "大力士【" + this.info.nickname + "】摇中大礼，测测你的臂力"
                    }
                    this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/mfact/index?channel='+this.channel+'&reOpenid='+this.openid;
                });
        }else{
            this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/mfact/index?channel='+this.channel+'&reOpenid='+this.openid;
        }
    },
};
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    .wrapper {
        width: 100%
        height: 100%
    }
        .swiper1{
            position absolute
            top: 0
            left: 0
            bottom: 0
            right: 0
            background: url('http://rs.static.quanc.com.cn/activies/mfAct/rule.jpg') repeat center center;
            background-size: 100% 100%;
        }
    .pMain{
        width: 100%
        padding-top 2rem
    }
    .pMain>h2{
        margin-top .2rem
        font-weight 600
        font-size .36rem
        text-align center
        color #fff
    }
        .myYear{
            width: 40%
            margin 0 auto
            margin-bottom .3rem
            padding-top: 0.6rem;
        }
    .myYear>img{
        width: 100%
        height: 100%
    }
    .pMain>p{
        padding-top .3rem
        width: 80%
        margin 0 auto
        /*text-indent 2em*/
        font-size .24rem
        color #fff;
        line-height .4rem
        margin-bottom .2rem
    }
    .prize{
        width: 70%
        height 1rem
        margin .1rem auto
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/name.png') repeat center center;
        background-size: 100% 100%;
    }
    .prize>span{
         display inline-block
         line-height 1rem
         width 40%
         text-align center
         padding-left .1rem
         color #b1181e
         font-weight 600
     }
    .prize>em{
        display inline-block
        line-height 1rem
        width 50%
        text-align center
        padding-left .2rem
        color #b1181e
        font-weight 600
        position relative
    }
        em>i{
            position: absolute;
            top: 0.5rem;
            width: 1.5rem;
            height: 2px;
            background-color: #f63173;
            left: 30%;
        }
    .bot{
            position absolute
            top: 0
            left: 0
            bottom: 0
            right: 0
            background: url('http://rs.static.quanc.com.cn/activies/mfAct/12.jpg') repeat center center;
            background-size: 100% 100%;
    }
    .bots{
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/15.jpg') repeat center center;
        background-size: 100% 100%;
    }
    .return{
        position absolute
        top: 1rem
        left 0
        width: 2rem
    }
    .return>img{
        width: 100%
        height: 100%
    }
    .arrow {
        position: absolute
        bottom 1rem
        width: 100%
        text-align center
        z-index: 999
        -webkit-animation:start 1.5s infinite ease-in-out
    }
    .arrow>img{
        width: 50px;
        height: 30px;
        margin: 0 auto;
    }
    @-moz-keyframes start {
        0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
        60% {opacity: 1;-moz-transform: translate(0,0);}
        100% {opacity: 0;-moz-transform: translate(0,-8px);}
    }
    @keyframes start {
        0%,30% {opacity: 0;transform: translate(0,10px);}
        60% {opacity: 1;transform: translate(0,0);}
        100% {opacity: 0;transform: translate(0,-8px);}
    }

    .text{
        width: 100%
        text-align center
        position absolute
        bottom 1.6rem
        color #fff
    }
</style>
